
.article-detail{
  position: relative;
  padding-bottom: 50px;
  // 内容和推荐公用配置
  @mixin mainBg{
    width: 930px;
    background: #fff;
    border-radius: 2px;
    @include box-shadow(0 1px 2px 0 rgba(0,0,0,.05));
  }
  &-main{
    @include mainBg();
    padding: 20px;
    .author-info__follow-btn{
      padding: 0 ;
      width: 55px;
      height: 26px;
      font-size: 13px;
      background: #fff !important;
      box-shadow: none;
      &:hover{
        opacity: .8;
      }
    }
    .followed{
      color: #fff;
      background-color: $theme-color !important;
    }
    .author-info{
      display: flex;
      align-items: center;
      &__img{
        .ant-image-img{
          border-radius: 50%;
        }
      }
      &__content{
        flex-shrink: 0;
        width: 545px;
        margin-left:10px;
        .author-name{
          @extend %ellipsis;
          max-width: calc(100% - 50px);
          line-height: 20px;
          color: $grey-3;
          font-weight: 700;
        }
        .meta-box{
          color: #909090;
        }
        .time{
          margin-right: 5px;
        }
      }
    }
    .article-main{
      margin: 20px 0 36px;
      min-height: 500px;
    }
    .author-info-block{
      padding: 15px 17px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      background: #f4f5f5;
      cursor: pointer;
      .user-img{
        .ant-image-img{
          border-radius: 50%;
        }
      }
      .author-info-box{
        width: 510px;
        margin-left: 12px;
        .profile-box{
          color: $grey-3;
          font-size: 14px;
          font-weight: 700;
        }
        .meta-box{
          font-size: 13px;
          color: $grey-90;
        }
      }
    }
    #comment-box{
      // 锚点用的
      padding-top: 70px;
      margin-top: -70px;

      .comment-list-box{
        padding-top: 16px;
        position: relative;
        border-top: 1px solid #ebebeb;
        .triangle-top{
          position: absolute;
          top: -8px;
          left: 50%;
          margin: -7px 0 0 -7px;
          width: 14px;
          height: 14px;
          border-top: 1px solid #fff;
          @include transform(rotate(180deg));
          &::before{
            content: '';
            position: absolute;
            margin: auto;
            top: -6px;
            left: 0;
            right: 0;
            width: 10px;
            height: 10px;
            @include transform(rotate(45deg));
            border-right: 1px solid #ebebeb;
            border-bottom: 1px solid #ebebeb;
            background: #fff;
          }
        }
        .comment-form{
          display: flex;
          padding: 12px 16px;
          margin: 0 20px 16px;
          border-radius: 3px;
          background: #fafbfc;
          .avatar-box{
            .ant-image-img{
              border-radius: 50%;
            }
          }
          .form-box{
            flex: 1 1 auto;
            margin-left: 12px;
            .ant-input:focus{
              & + .input-operation{
                display: block;
              }
            }
            .input-operation{
              display: none;
     
              &:hover{
                &, + .input-operation{
                  display: block;
                }
              }
            }
          }
        }
        .comment-list{
          margin: 0 20px;
          padding-left: 60px;
          .comment-item{
            padding-top: 10px;
            display: flex;
            .item-img{
              .ant-image-img{
                border-radius: 50%;
              }
            }
            .comment-info{
              width: 100%;
              margin-left: 10px;
              .meta-box{
                color: $grey-3;
                line-height: 22px;
              }
              .content{
                margin-top: 5px;
                color: #505050;
                line-height: 22px;
              }
              .limit-ctl-box{
                margin-top: 7px;
                width: 100%;
                display: flex;
                .time{
                  color: #8a9aa9;
                }
                .operator{
                  flex: 0 0 auto;
                  margin-left: auto;
                }
              }
            }
            &:not(:last-child){
              .comment-info{
                padding-bottom: 10px;
                border-bottom: 1px solid #f1f1f1;
              }
              .sub-comment-list{
                margin-bottom: 0;
              }
            }
          }
          .sub-comment-list{
            padding-left:12px;
            margin: 12px 0;
            background: #fafbfc;
            border-radius: 3px;
            .item{
              padding-top: 12px;
              display: flex;
              .item-img{
                .ant-image-img{
                  border-radius: 50%;
                }
              }
              .comment-info{
                width: 100%;
                padding-bottom: 12px;
                margin:0 12px 0 10px;
                border-bottom: none;
                .meta-box{
                  color: $grey-3;
                  line-height: 22px;
                }
                .content{
                  margin-top: 5px;
                  color: #505050;
                  line-height: 22px;
                }
                .limit-ctl-box{
                  margin-top: 7px;
                  width: 100%;
                  display: flex;
                  .time{
                    color: #8a9aa9;
                  }
                  .operator{
                    flex: 0 0 auto;
                    margin-left: auto;
                  }
                }
              }
              &:not(:last-child){
                .comment-info{
                  border-bottom: 1px solid #f1f1f1;
                }
              }
            }
          }
        }
      }
    }
  }
  .recommended-area{
    @include mainBg();
    margin-top: 18px;
    &-title{
      font-size: 14px;
      color: $grey-90;
      font-weight: bold;
      padding: 16px 24px;
      border-bottom: 1px solid rgba(178,186,194,.15);
    }
  }
  &-right{
    position: absolute;
    top: 0;
    right: 0;
    width: 240px;
  }
  &-left{
    position: fixed;
    top: 200px;
    margin-left: -100px;
  }
}